<!--
*@Author: QWP
*@Description: 综合预警
*@Date: 2024-07-08 09:51:28
-->
<template>
  <a-layout class="f-h-100 s-bg-white">
    <!-- <u-collapsed-sider class="f-padding-6">
      <u-tree
        :treeData="resourceServeTree.tree[0].children"
        ref="treeRef"
        :showSearch="false"
        :field-names="{
          title: 'text',
          key: 'id',
          children: 'children',
        }"
        v-model:expandedKeys="treeExpandes"
        @select="
          (keys, { selected: bool, selectedNodes, node, event }) => {
            searchF.model.fkRegionId = node['code'];
            getSearch(1);
          }
        "
      />
    </u-collapsed-sider> -->

    <a-layout class="f-h-100 s-bg-white">
      <u-table-header>
        <u-form
          :model="searchF.model"
          :gutter="16"
          :elements="searchEl"
          class="f-w-auto"
          :isSearch="true"
          @formChange="getSearch(1)"
        >
          <a-col>
            <a-space>
              <u-icon-button @click="getSearch(1)">查询</u-icon-button>
            </a-space>
          </a-col>
        </u-form>
      </u-table-header>
      <u-table-content>
        <u-table
          :columns="columns"
          :data="tabData"
          v-model:pagination="pagenation"
          :loading="loading"
          :scroll="{ y: useTableScroll() }"
          @onSelect="({ selectedRows }) => (tabSelData = selectedRows)"
          @onDblclick="
            record => {
              currentRow = record;
              showDispose = true;
            }
          "
          @change="getSearch"
        ></u-table>
      </u-table-content>
    </a-layout>
  </a-layout>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, watch } from 'vue';
import {
  useRoute,
  useRouter,
  onBeforeRouteUpdate,
  onBeforeRouteLeave,
} from 'vue-router';
import { _IFormEl } from '@/components/common/form/interface';
import {
  Row,
  Button,
  ColProps,
  FormItemProps,
  Space,
  TableColumnProps,
  TypographyTitle,
  Rate,
} from 'ant-design-vue';
import { _IExtra } from '@/src/components/common/form/interface';
import { useTableScroll } from '@/hooks/useTable';
import * as sensorIformationAPI from '@/service/emergency/sensorIformation';
import * as resourceServeTree from '@/service/resource/tree';
import dayjs from 'dayjs';

const emits = defineEmits(['focusChange']);

const treeExpandes = ref(['fda30684-6473-4fb5-8cdb-0d6001a7dd15']);

const statusOptions = ref([
  { label: '正常', value: '0' },
  { label: '超限报警', value: '1' },
  { label: '断点报警', value: '2' },
  { label: '标校', value: '4' },
  { label: '标校报警', value: '5' },
  { label: '超量程', value: '8' },
  { label: '分站故障', value: '16' },
  { label: '不巡检', value: '32' },
  { label: '暂停', value: '64' },
  { label: '传感器故障', value: '128' },
]);

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: total => `共 ${total} 条`,
});
const searchF = reactive({
  model: {
    keywords: null,
  },
});
const formItemProps: FormItemProps & _IExtra = {
  labelWidth: '100',
  wrapperCol: { span: 24 },
};
const dataTypeOptions = ref([
  {
    label: '模拟量',
    value: 'MN',
  },
  {
    label: '开关量',
    value: 'KG',
  },
  {
    label: '累计量',
    value: 'LJ',
  },
  {
    label: '多态量',
    value: 'DT',
  },
]);

const searchEl: Array<_IFormEl> = [
  {
    label: '模糊查询',
    key: 'keywords',
    element: 'input',
    col: { span: 4 },
    formItemProps: formItemProps,
    componentProps: { placeholder: '请输入关键字' },
  },
  {
    label: '测点数值类型',
    key: 'dataType',
    element: 'select',
    col: { span: 4 },
    formItemProps: formItemProps,
    componentProps: {
      options: dataTypeOptions.value,
    },
  },
  {
    label: '传感器状态',
    key: 'state',
    element: 'select',
    col: { span: 4 },
    formItemProps: formItemProps,
    componentProps: {
      options: statusOptions.value,
    },
  },
];

// 列表
const currentRow = ref({});
const loading = ref<boolean>(false);
const tabSelData = ref<any[]>([]);
const tabData = ref<any[]>([]);
let columns: Array<TableColumnProps> = reactive([
  {
    dataIndex: 'ROW_ID',
    title: '序号',
    width: 50,
    align: 'center',
    customRender: ({ text, record, index }) => {
      return index + 1;
    },
  },
  {
    dataIndex: 'collieryName',
    title: '煤矿名称',
    width: 400,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'sensorCode',
    title: '传感器编码',
    width: 300,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'sensorType',
    title: '传感器类型',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'state',
    title: '传感器状态',
    width: 200,
    customRender: ({ text, record, index }) => {
      let str = '';
      statusOptions.value.forEach(item => {
        if (item.value == text) {
          str = item.label;
        }
      });
      return str;
    },
  },
  // { dataIndex: 'creator', title: '创建人', width: 200 },
  {
    dataIndex: 'dataDate',
    title: '数据时间',
    width: 200,
    customRender: ({ text, record, index }) => {
      let str = '';
      if (text) {
        str = dayjs(Number(text)).format('YYYY-MM-DD HH:mm:ss');
        return str;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'dataType',
    title: '测点数值类型',
    width: 200,
    customRender: ({ text, record, index }) => {
      let str = 'xx';
      dataTypeOptions.value.map(item => {
        if (item.value == text) {
          str = item.label;
        }
      });
      return str;
    },
  },
  // { dataIndex: 'dept', title: '单位', width: 200 },
  // { dataIndex: 'factory', title: '生产厂家', width: 200 },
  // {
  //   dataIndex: 'producerDate',
  //   title: '出厂日期',
  //   width: 200,
  //   customRender: ({ text, record, index }) => {
  //     let str = '';
  //     if (text) {
  //       str = dayjs(Number(text)).format('YYYY-MM-DD HH:mm:ss');
  //       return str;
  //     } else {
  //       return '--';
  //     }
  //   },
  // },
  // {
  //   dataIndex: 'scrappedDate',
  //   title: '报废日期',
  //   width: 200,
  //   customRender: ({ text, record, index }) => {
  //     let str = '';
  //     if (text) {
  //       str = dayjs(Number(text)).format('YYYY-MM-DD HH:mm:ss');
  //       return str;
  //     } else {
  //       return '--';
  //     }
  //   },
  // },
  {
    dataIndex: 'generationDate',
    title: '上传时间',
    width: 200,
    customRender: ({ text, record, index }) => {
      let str = '';
      if (text) {
        str = dayjs(Number(text)).format('YYYY-MM-DD HH:mm:ss');
        return str;
      } else {
        return '--';
      }
    },
  },
  // {
  //   dataIndex: 'inuseDate',
  //   title: '使用日期',
  //   width: 200,
  //   customRender: ({ text, record, index }) => {
  //     let str = '';
  //     if (text) {
  //       str = dayjs(Number(text)).format('YYYY-MM-DD HH:mm:ss');
  //       return str;
  //     } else {
  //       return '--';
  //     }
  //   },
  // },
  {
    dataIndex: 'lowerEndLimit',
    title: '下限报警门限',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'lowerOutageValue',
    title: '下限断电门限',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  // { dataIndex: 'lowerReconnectValue', title: '下限复电门限', width: 200 },
  // { dataIndex: 'manualAlertDown', title: '手动报警下限', width: 200 },
  // { dataIndex: 'manualAlertUp', title: '下限复电门限', width: 200 },
  // { dataIndex: 'model', title: '型号', width: 200 },
  {
    dataIndex: 'powerCutValue',
    title: '上限断电门限',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  // { dataIndex: 'powerOnValue', title: '上限复电门限', width: 200 },
  {
    dataIndex: 'rangeDown',
    title: '低量程',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'rangeUp',
    title: '高量程',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'readNum',
    title: '测点值',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'sensorAddress',
    title: '监测地址',
    width: 300,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  // { dataIndex: 'sensorRange	', title: '传感器里程', width: 200 },
  {
    dataIndex: 'subStationCode',
    title: '分站编码',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'subStationPosition',
    title: '分站安装位置',
    width: 300,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  // { dataIndex: 'systemCode', title: '系统编码', width: 200 },
  {
    dataIndex: 'unit',
    title: '测点数值单位',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  // {
  //   dataIndex: 'updateDateTime',
  //   title: '修改时间',
  //   width: 200,
  //   customRender: ({ text, record, index }) => {
  //     let str = '';
  //     if (text) {
  //       str = dayjs(Number(text)).format('YYYY-MM-DD HH:mm:ss');
  //       return str;
  //     } else {
  //       return '--';
  //     }
  //   },
  // },
  // {
  //   dataIndex: 'updater',
  //   title: '修改人',
  //   width: 200,
  //   align: 'center',
  //   customRender: ({ text, record, index }) => {
  //     if (text) {
  //       return text;
  //     } else {
  //       return '--';
  //     }
  //   },
  // },
  // {
  //   dataIndex: 'uploadDateTime',
  //   title: '上传时间',
  //   width: 200,
  //   customRender: ({ text, record, index }) => {
  //     let str = '';
  //     if (text) {
  //       str = dayjs(Number(text)).format('YYYY-MM-DD HH:mm:ss');
  //       return str;
  //     } else {
  //       return '--';
  //     }
  //   },
  // },
  {
    dataIndex: 'upperEndLimit',
    title: '上限解报门限',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  // { dataIndex: 'verifier', title: '检验人', width: 200 },
  // {
  //   dataIndex: 'verifyDate',
  //   title: '校验日期',
  //   width: 200,
  //   customRender: ({ text, record, index }) => {
  //     let str = '';
  //     if (text) {
  //       str = dayjs(Number(text)).format('YYYY-MM-DD HH:mm:ss');
  //       return str;
  //     } else {
  //       return '--';
  //     }
  //   },
  // },
  // {
  //   dataIndex: 'verifyExpireDate',
  //   title: '检验到期日期',
  //   width: 200,
  //   customRender: ({ text, record, index }) => {
  //     let str = '';
  //     if (text) {
  //       str = dayjs(Number(text)).format('YYYY-MM-DD HH:mm:ss');
  //       return str;
  //     } else {
  //       return '--';
  //     }
  //   },
  // },
  {
    dataIndex: 'openDescription',
    title: '描述',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'relationship',
    title: '传感器关联关系',
    width: 500,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
]);

onMounted(() => {
  getSearch();
});

// 列表查询
const getSearch = async (current?: number) => {
  loading.value = true;
  try {
    if (current == 1) {
      pagenation.current = 1;
    }
    // searchF.model.keywords = searchF.keywords;
    searchF.current = pagenation.current;
    searchF.size = pagenation.pageSize;
    const res = await sensorIformationAPI.getCompany(searchF);
    if (res.code == 0) {
      tabData.value = res.data.records || [];
      pagenation.total = res.data.total;
    }
  } catch (error) {}
  loading.value = false;
};

let showDispose = ref<boolean>(false);
</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
</style>
